<template>
  <div>
    <div class="detail_box">
      <el-tabs v-model="activeName">
        <el-tab-pane label="工程概况" name="first">
          <div class="detail">
            <el-row :gutter="20">
              <el-col :span="10">
                <h4>工程名称</h4>
                <div>{{ detail.name }}</div>
              </el-col>
              <el-col :span="10">
                <h4>工程编号</h4>
                <div>{{ detail.number }}</div>
              </el-col>
              <!-- <el-col :span="10">
                <h4>勘察单号</h4>
                <div>{{ detail.surveyNumber }}</div>
              </el-col> -->
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10">
                <h4>建设单位</h4>
                <div>{{ detail.ownerUnit }}</div>
              </el-col>
              <el-col :span="10">
                <h4>施工单位</h4>
                <div>{{ detail.constructionUnit }}</div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10">
                <h4>工程地点</h4>
                <div>{{ detail.location }}</div>
              </el-col>
              <!-- <el-col :span="10">
                <h4>安全负责人</h4>
                <div>{{ detail.safetyManager }}</div>
              </el-col> -->
            </el-row>
            <!-- <el-row :gutter="20"> -->

              <!-- <el-col :span="10">
                <h4>检查时间</h4>
                <div class="content">{{ dateFormat(detail.startDate) + ' 至 ' +  dateFormat(detail.endDate) }}</div>
              </el-col> -->
            <!-- </el-row> -->
            <el-row>
              <el-col :span="22">
                <h4>工程内容及主要工作量</h4>
                <div class="content">{{ detail.workload }}</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <h4>作业方式</h4>
                <div>{{ detail.jobWay ? schemeJobWay[detail.jobWay] : '-' }}</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <h4>作业环境</h4>
                <div class="content">{{ detail.workEnv || '-' }}</div>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="施工信息" name="second">
          <div class="detail">
            <el-row :gutter="20">
              <el-col :span="10">
                <h4>工程负责人</h4>
                <!-- <div>{{ showUser(1, detail.projectLeader, '') }}</div> -->
                <div>{{ detail.projectLeader }}</div>
              </el-col>
              <el-col :span="10">
                <h4>施工负责人</h4>
                <div>{{ showUser(1, detail.constructionLeader, '') }}</div>
              </el-col>
              <el-col :span="10">
                <h4>技术负责人</h4>
                <div>{{ showUser(1, detail.technicalLeader, '') }}</div>
              </el-col>
              <el-col :span="10">
                <h4>安全员</h4>
                <div>{{ showUser(1, detail.qualityLeader, '') }}</div>
              </el-col>
              <el-col :span="10">
                <h4>材料员</h4>
                <div>{{ showUser(1, detail.materialLeader, '') }}</div>
              </el-col>
              <el-col :span="10">
                <h4>工作班人员</h4>
                <div>{{ showUser(2, '', detail.workUsers) }}</div>
              </el-col>
              <el-col :span="10">
                <h4>其他工作班人员</h4>
                <div>{{ detail.otherUsers }}</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <h4>工作任务</h4>
                <div class="content">{{ detail.workTasks }}</div>
              </el-col>
              <el-col :span="22">
                <h4>人员分工</h4>
                <div class="content">{{ detail.workDivision }}</div>
              </el-col>
              <el-col :span="22">
                <h4>安全工器具情况</h4>
                <div class="content">{{ detail.instrument }}</div>
              </el-col>
            </el-row>
            <el-row v-if="detail.equipments.length > 0">
              <el-col :span="22">
                <h4>工器具配备表</h4>
                <div v-for="item in detail.equipments">
                  <el-row style="margin-bottom: 4px;">
                    <el-col :span="6">
                      <span>名称：{{ item.name }}</span>
                    </el-col>
                    <el-col :span="6">
                      <span>数量：{{ item.number }}</span>
                    </el-col>
                    <el-col :span="6">
                      <span>规格：{{ item.specification }}</span>
                    </el-col>
                  </el-row>
                  <el-row style="margin-bottom: 10px;">
                    <el-col :span="18">
                      <span>备注：{{ item.remark }}</span>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <h4>施工进度节点计划</h4>
                <div v-for="item in detail.schedulingNodes">
                  <el-row style="margin-bottom: 4px;">
                    <el-col :span="6">
                      <span>工作内容：{{ item.content }}</span>
                    </el-col>
                    <el-col :span="10">
                      <span>开始/完成时间：{{ dateFormat(item.startTime) + ' 至 ' +  dateFormat(item.endTime) }}</span>
                    </el-col>
                    <el-col :span="6">
                      <span>配合部门：{{ item.division }}</span>
                    </el-col>
                  </el-row>
                  <el-row style="margin-bottom: 10px;">
                    <el-col :span="22">
                      <span>安全措施：{{ item.safetyControl }}</span>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="工程管理" name="third">
          <div class="detail">
            <el-row>
              <el-col :span="22">
                <h4>施工管理</h4>
                <div class="content">{{ detail.workManage }}</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <h4>技术管理</h4>
                <div class="content">{{ detail.technicalManage }}</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <h4>质量管理</h4>
                <div class="content">{{ detail.qualityControl }}</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <h4>安全管理措施</h4>
                <div class="content">{{ detail.safetyControl }}</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <h4>危险点控制</h4>
                <div v-for="(item, index) in detail.dangerPoints" class="danger content">
                  <div>{{ '危险点' + (index + 1) + ': ' +item.point }}</div>
                  <div>{{ item.measure }}</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="其他" name="fourth">
          <div class="detail">
            <el-row>
              <el-col :span="22">
                <h4>施工图纸</h4>
                <div v-for="(item, index) in detail.drawings">
                  <div style="margin-bottom: 10px;" v-if="item.name.indexOf('.png') > -1 || item.name.indexOf('.jpg') > -1">
                    <img class="img" :src="item.url" @click="openImg(item.url)" />
                  </div>
                  <div style="margin-bottom: 10px;" v-else>
                    <a href="javascript:void(0)" @click="downloadFile(item.url)">{{ item.name }}</a>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <h4>主要施工机械工器具安全防护用品（用具）报审表</h4>
                <div v-if="detail.protectiveEquipmentDoc && detail.protectiveEquipmentDoc.length > 0">
                  <a v-for="(item, index) in detail.protectiveEquipmentDoc" href="javascript:void(0)" @click="downloadFile(item.url)">{{ item.name }}</a>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <h4>大中型施工机械进场出场申报表</h4>
                <div v-if="detail.mechanicalIoDoc && detail.mechanicalIoDoc.length > 0">
                  <a v-for="(item, index) in detail.mechanicalIoDoc" href="javascript:void(0)" @click="downloadFile(item.url)">{{ item.name }}</a>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <h4>安全工器具登记台账</h4>
                <div v-if="detail.safetyToolDoc && detail.safetyToolDoc.length > 0">
                  <a v-for="(item, index) in detail.safetyToolDoc" href="javascript:void(0)" @click="downloadFile(item.url)">{{ item.name }}</a>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <h4>安全措施项</h4>
                <el-row v-for="safeInfo in safeInfoList">
                  <el-col :span="22">
                    <span>{{ safeInfo.nam }}</span>
                    <div v-for="(item) in safeInfo.safePics">
                      <div style="margin-bottom: 10px;" v-if="item.indexOf('.png') > -1 || item.indexOf('.jpg') > -1">
                        <img class="img" :src="item" @click="openImg(item)" />
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-image-viewer v-if="showImgFlag" :on-close="()=>{showImgFlag=false}" :url-list="imgList"></el-image-viewer>
  </div>
</template>
<script>
import { getDics } from '@/api/utils/index'
import { schemeDetails } from '@/api/scheme/index'
import { getSurveyDetail } from '@/api/survey/index'
import { parseTime } from '@/utils/index.js'
import { userPage } from '@/api/usrs/index'
export default {
  name: "detail",
  props:{
    detailId:{
      type: Number
    }
  },
  components: {
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
  },
  data() {
    return {
      showImgFlag: false,
      imgList: [],
      surveyDate: {},
      safeInfoList: [],
      activeName: 'first',
      detail: {
        surveyId: null,
        number: null,
        surveyNumber: null,
        name: '',
        safetyNamagerId: null,
        safetyManager: '',
        ownerUnit: '',
        constructionUnit: '',
        location: '',
        id: null,
        number: '',
        checkDate: [],
        jobWay: null,
        workEnv: '',
        drawings: [],
        workload: '',
        projectLeader: '',
        constructionLeader: null,
        technicalLeader: null,
        qualityLeader: null,
        materialLeader: null,
        workUsers: [],
        otherUsers: '',
        workDivision: '',
        workTasks: '',
        instrument: '',
        equipments: [],
        schedulingNodes: [{
          serialNumber: '',
          content: '',
          safetyControl: '',
          division: '',
          checkDate: [],
        }],
        workManage: '',
        technicalManage: '',
        qualityControl: '',
        safetyControl: '',
        dangerPoints: [],
        protectiveEquipmentDoc: [],
        mechanicalIoDoc: [],
        safetyToolDoc: [],
        auditStatus: 0 //状态
      },
      schemeJobWay: {},
      schemeTypicalViolation: {},
      allUsers: [],
    };
  },
  created() {

  },
  async mounted() {
    await this.getAllUser()
    await this.getDicsList();
    this.getDetail()
  },
  methods: {
    //获取所有用户
    async getAllUser() {
      let params = { pageNum: 1, pageSize: 9999}
      userPage(params).then(res => {
        this.allUsers = res.data.list
      })
    },
    showUser(type, id, ids) {
      let str = ''
      if(type === 1 && id) {
        let usr = this.allUsers.find(item => item.id === parseInt(id))
        str = usr.name
      } else if(type === 2 && ids && ids.length > 0){
        ids = JSON.parse(ids)
        ids.forEach((item1, index) => {
          let usr = this.allUsers.find(item => item.id === parseInt(item1))
          str += usr.name
          if(index < ids.length - 1) str += ';'
        })
      }
      return str
    },
    downloadFile(url) {
      window.location.href = url
    },
    async getDicsList() {
      getDics(['schemeJobWay', 'schemeTypicalViolation']).then(res=>{
        this.schemeJobWay = res.data.schemeJobWay
        this.schemeTypicalViolation = res.data.schemeTypicalViolation
      })
    },
    getDetail() {
      schemeDetails({ id: this.detailId }).then(res => {
        this.detail = res.data
        this.detail.drawings = this.detail.drawings ? JSON.parse(this.detail.drawings) : [],
        this.detail.protectiveEquipmentDoc = this.detail.protectiveEquipmentDoc ? JSON.parse(this.detail.protectiveEquipmentDoc) : [],
        this.detail.mechanicalIoDoc = this.detail.mechanicalIoDoc ? JSON.parse(this.detail.mechanicalIoDoc) : [],
        this.detail.safetyToolDoc = this.detail.safetyToolDoc ? JSON.parse(this.detail.safetyToolDoc) : []
        this.getSurveyDetails()
      })
    },
    // 获取勘察记录项
    getSurveyDetails() {
      getSurveyDetail({ id: this.detail.surveyId })
        .then(res => {
          this.surveyDate = res.data
          if (res.data) {
            this.safeInfoList = res.data.safeInfoList
          }
        })
    },
    openImg(url) {
      this.imgList = [url];
      this.showImgFlag = true;
    },
    dateFormat(date) {
      if(date) {
        return parseTime(date,'{y}-{m}-{d} {h}:{i}')
      } else {
        return '-'
      }
    }
  }
};
</script>
<style scoped="scoped" lang="scss">
a {
  color: #409EFF;
}
h4 {
  color: #303133;
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 14px;
}
.detail_box {
  padding: 0px 20px 40px 20px;
  .detail {
    font-size: 14px;
    color: #666666;
  }
}
.content {
  white-space: pre-wrap;
  line-height: 20px;
}
::v-deep .el-tabs__nav-wrap::after {
  height: 0 !important;
}
.danger {
  line-height: 20px;
  margin-bottom: 10px;
}
// .img_box {
//   margin: 10px 0;
  img {
    cursor: pointer;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    object-fit: cover;
  }
// }
</style>
